<template>
  <el-container class="bg_img1 bg_img_Yy">
    <el-main class="bg_size1 bg_size_Yy">
      <h1 class="Yy">预约座位</h1>

      <el-form
        :model="orderForm"
        :rules="rules"
        ref="orderForm"
        class="demo-ruleForm"
        label-position="left"
        label-width="100px"
      >
        <el-row>
          <el-col :span="7" :offset="9">
            <el-form-item label="预约位置" prop="position" class="item1">
              <el-input
                v-model="orderForm.roomtitle"
                placeholder="请填写预约位置"
                disabled
              >
                {{ roomtitle }}
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7" :offset="9">
            <el-form-item label="预约日期" prop="orderdate" class="item1">
              <el-date-picker
                v-model="orderForm.orderdate"
                placeholder="请输入预约日期"
                style="width: 100%"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7" :offset="9">
            <el-form-item label="预约时间" prop="ordertime" class="item1">
              <el-select
                v-model="orderForm.ordertime"
                placeholder="请选择预约时间"
                style="width: 100%"
              >
                <el-option
                  label="08:30--10:30"
                  value="08:30--10:30"
                ></el-option>
                <el-option
                  label="10:30--12:00"
                  value="10:30--12:00"
                ></el-option>
                <el-option
                  label="12:00--14:00"
                  value="12:00--14:00"
                ></el-option>
                <el-option
                  label="14:00--16:00"
                  value="14:00--16:00"
                ></el-option>
                <el-option
                  label="16:00--18:00"
                  value="16:00--18:00"
                ></el-option>
                <el-option
                  label="18:00--20:00"
                  value="18:00--20:00"
                ></el-option>
                <el-option
                  label="20:00--22:00"
                  value="20:00--22:00"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3" :offset="11" class="msg">
            <span>{{ msg }}</span>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="2" :offset="11">
            <el-button type="primary" text bg v-on:click="selectSeat()">
              开始选座
            </el-button>

            <!--选择座位-->
            <el-drawer
              v-model="drawer.drawer"
              :title="drawer.title"
              :modal="drawer.modal"
              :direction="drawer.direction"
              :open-delay="drawer.delay"
              :size="drawer.size"
              :close-on-click-modal="drawer.closeOnClickModal"
              style="background-color: rgb(238, 241, 246)"
            >
              <div class="xuanzhuo_img">
                <el-row>
                  <el-col :span="2" v-for="ss in seats">
                    <el-switch
                      v-for="button in ss"
                      v-model="button.delivery"
                      style="--el-switch-off-color: #13ce66"
                      size="large"
                      inline-prompt
                      active-text="Y"
                      inactive-text="N"
                      v-on:click="reverse($event, button.delivery, button.text)"
                      
                    ></el-switch>
                  </el-col>
                </el-row>

              </div>
            </el-drawer>
          </el-col>

          <el-col :span="1">
            <el-button type="primary" text bg v-on:click="goback()">
              返回主页面
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";
import qs from "querystring";
import store from "../store";

export default {
  name: "PreorderVue",
  data() {
    return {
      orderForm: {
        roomtitle: "",
        orderdate: "",
        ordertime: "",
      },
      rules: {
        orderdate: [
          {
            required: true,
            message: "预约日期不能为空",
            trigger: "blur",
          },
        ],
        ordertime: [
          {
            required: true,
            message: "预约时间不能为空",
            trigger: "blur",
          },
        ],
      },
      fit: "fill",
      drawer: {
        //选择座位
        drawer: false,
        title: "选择座位",
        modal: false,
        direction: "ttb",
        size: 450,
        closeOnClickModal: false,
        delay: 1000,
      },
      seats: [
        [
          { delivery: "", text: "1" },
          { delivery: "", text: "7" },
          { delivery: "", text: "13" },
          { delivery: "", text: "19" },
          { delivery: "", text: "25" }
        ],
        [
          { delivery: "", text: "2" },
          { delivery: "", text: "8" },
          { delivery: "", text: "14" },
          { delivery: "", text: "20" },
          { delivery: "", text: "16" }
        ],
        [
          { delivery: "", text: "3" },
          { delivery: "", text: "9" },
          { delivery: "", text: "15" },
          { delivery: "", text: "21" },
          { delivery: "", text: "27" }
        ],
        [
          { delivery: "", text: "4" },
          { delivery: "", text: "10" },
          { delivery: "", text: "16" },
          { delivery: "", text: "22" },
          { delivery: "", text: "28" }
        ],
        [
          { delivery: "", text: "5" },
          { delivery: "", text: "11" },
          { delivery: "", text: "17" },
          { delivery: "", text: "23" },
          { delivery: "", text: "29" }
        ],
        [
          { delivery: "", text: "6" },
          { delivery: "", text: "12" },
          { delivery: "", text: "18" },
          { delivery: "", text: "24" },
          { delivery: "", text: "30" }
        ]
      ]
    }
  },

  methods: {
    selectSeat() {
      this.$refs["orderForm"].validate((valid) => {
        if (valid) {
          // this.msg="该时间段可容纳人数已满";
          // this.msg="该时间段还有余位";
          this.drawer.drawer = true;
          // console.log("ccc", this.orderForm);

          // 存储预约日期类型
          this.$store.commit("setDateInfo", this.orderForm.orderdate);
          this.$store.commit("setTimeInfo", this.orderForm.ordertime);

          // 获取楼层号和教室号
          let fno = this.$store.state.seatInfo.fno;
          let rno = this.$store.state.seatInfo.rno;
          console.log(fno, rno);

          let that = this;

          axios
            .post(
              "http://localhost:8080/library/oKSeat",
              qs.stringify({ fno, rno }),
              {
                headers: {
                  "Content-Type":
                    "application/x-www-form-urlencoded;charset=UTF-8",
                },
              }
            )
            .then(function (response) {
              if (response.data.code == 1) {

                that.$store.commit("selectedSeat", response.data.data);
                // console.log(typeof that.$store.state.selectedseat); object
                
                //已被选中的座位

                let selected = that.$store.state.selectedseat;
                console.log(selected);
                // 即将渲染的座位
                let seats = that.seats;

                for (let index = 0; index < selected.length; index++) {
                  for (let i = 0; i < seats.length; i++) {
                    for (let j = 0; j < seats[i].length; j++) {  
                      // console.log(typeof seats[i][j].text);                                       
                      // console.log(seats[i][j].text==selected[index]); 

                         if ( parseInt(seats[i][j].text) == selected[index]) {
                            seats[i][j].delivery = "true";
                         }                      
                    }
                  }
                }

              } else {
                that.msg = "失败";
              }
            })
            .catch((error) => {
              console.log(error);
            });
        }
      });
    },
    reverse(a, b, seatno) {
      // console.log(a);
      // console.log(b);
      // console.log(seatno);

      this.$store.commit("setsno", seatno);
      // console.log(this.$store.state.seatInfo.fno);
      // console.log(this.$store.state.seatInfo.rno);
      // console.log(this.$store.state.seatInfo.sno);

      let fno = this.$store.state.seatInfo.fno;
      let rno = this.$store.state.seatInfo.rno;
      let sno = this.$store.state.seatInfo.sno;
      let id = this.$store.state.accountInfo.id;

      const that = this;
      this.$refs["orderForm"].validate((valid) => {

        axios
          .post(
            "http://localhost:8080/library/orderSeat",
            qs.stringify({ sno, fno, rno, id }),
            {
              headers: {
                "Content-Type":
                  "application/x-www-form-urlencoded;charset=UTF-8",
              },
            }
          )
          .then(function (response) {
            if (response.data.code == 1) {
              let oid = response.data.data;
              that.$store.commit("setAccountOId",oid);

              window.alert("选座成功，点击确认前往我的订座查看订座信息");
              that.$router.push({
                path: "/UserIndex",
              });
            } else {
              // window.alert("失败");
              that.msg = "失败";
              this.$router.push({ path: "/" });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      });
    },
    getInfo() {
      // this.roomInfo = JSON.parse(this.$store.state.roomInfo.title);
      let a = this.$store.state.floortitle;
      let b = this.$store.state.roomtitle;
      this.orderForm.roomtitle = a + " " + b;
      console.log(this.roomtitle);
    },
    goback() {
      this.$router.push("/UserIndex");
    },
  },
  mounted() {
    this.getInfo();
  },
};
</script>

<style scoped>
.Yy {
  margin-left: 50%;
  color: rgb(85, 165, 230);
}

.bg_img_Yy {
  background-image: url(../img/xuanzuo1.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.bg_size_Yy {
  margin-top: 172px;
  margin-bottom: 173px;
}
.bg_size1 {
  margin-top: 170px;
  margin-bottom: 145px;
}
.pointer {
  margin-left: 10px;
  color: #337ecc;
  cursor: pointer;
}

.img {
  width: 90px;
  height: 30px;
}

.msg {
  color: red;
  margin-bottom: 15px;
}

flex {
  margin-bottom: 10px;
}

.xuanzhuo_img {
  padding-left: 32%;
  background-image: url(../img/xuanzuo.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.el-row {
  margin-top: 20px;
}
</style>